<template>
	<view class="page">
		<view class="container">
			<view class="header">
				<uni-icons class="logo" type="person" color="#1976D2" size="60"></uni-icons>
				<text class="title">智能直播课堂</text>
			</view>

			<view class="login-box">
				<!-- 添加角色切换 -->
				<view class="role-display">
					<view class="role-item active">
						教师端
					</view>
				</view>

				<view class="tab-wrapper">
					<view :class="['tab-item', activeTab === 'password' ? 'active' : '']" @tap="switchTab('password')">
						密码登录</view>
					<view :class="['tab-item', activeTab === 'sms' ? 'active' : '']" @tap="switchTab('sms')">短信登录</view>
				</view>

				<view class="form">
					<view class="input-item">
						<view class="input-wrapper">
							<uni-icons class="input-icon" type="person" color="#666666" size="18"></uni-icons>
							<input class="uni-input" v-model="phone" placeholder="请输入手机号" />
						</view>
					</view>

					<view class="input-item">
						<view class="input-wrapper">
							<uni-icons class="input-icon" type="locked" color="#666666" size="18"></uni-icons>
							<input class="uni-input" v-model="password" :password="activeTab === 'password'"
								:placeholder="activeTab === 'password' ? '请输入密码' : '请输入验证码'" />
							<text v-if="activeTab === 'sms'" class="sms-btn" @tap="getSmsCode">获取验证码</text>
						</view>
					</view>

					<button class="login-btn" type="primary" @tap="handleLogin">登录</button>

					<view class="helper-links">
						<text class="link" @tap="toRegister">注册账号</text>
						<text class="link" @tap="toForgetPassword">忘记密码</text>
					</view>
				</view>

				<view class="other-login">
					<view class="divider">
						<text class="divider-text">其他登录方式</text>
					</view>
					<view class="wechat-login" @tap="handleWechatLogin">
						<uni-icons type="weixin" color="#07C160" size="28"></uni-icons>
						<text class="wechat-text">微信登录</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	const activeTab = ref('password');
	const phone = ref('');
	const password = ref('');

	const switchTab = (tab : string) => {
		activeTab.value = tab;
		password.value = '';
	};

	const handleLogin = () => {
		if (!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!password.value) {
			uni.showToast({
				title: activeTab.value === 'password' ? '请输入密码' : '请输入验证码',
				icon: 'none'
			});
			return;
		}
		
		// 显示加载提示
		uni.showLoading({
			title: '登录中...'
		});
		
		// 模拟登录请求
		setTimeout(() => {
			uni.hideLoading();
			
			// 这里可以添加实际的登录API调用
			// 模拟登录成功
			if (phone.value && password.value) {
				// 保存登录状态
				uni.setStorageSync('isLoggedIn', true);
				uni.setStorageSync('userInfo', {
					phone: phone.value,
					name: '用户' + phone.value.slice(-4),
					email: phone.value + '@example.com',
					role: 'teacher' // 固定为教师角色
				});
				
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				
				// 跳转到首页
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/home/home'
					});
				}, 1500);
			} else {
				uni.showToast({
					title: '登录失败，请检查账号密码',
					icon: 'none'
				});
			}
		}, 2000);
	};

	const getSmsCode = () => {
		if (!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		
		// 模拟发送验证码
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});
	};

	const toRegister = () => {
		// 跳转注册页面
		uni.navigateTo({
			url: '/pages/enllo/enllo'
		});
	};

	const toForgetPassword = () => {
		// 跳转忘记密码页面
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	};

	const handleWechatLogin = () => {
		// 处理微信登录逻辑
		uni.showToast({
			title: '微信登录功能开发中',
			icon: 'none'
		});
	};
</script>

<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		background: linear-gradient(135deg, #1976D2 0%, #64B5F6 100%);
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.header {
		margin-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo {
		width: 60px;
		height: 60px;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32px;
		color: #FFFFFF;
		font-weight: 500;
		margin-bottom: 80rpx;
	}

	.login-box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	/* 角色显示样式（替代角色切换） */
	.role-display {
		display: flex;
		margin-bottom: 30rpx;
		border: 1px solid #1976D2;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.role-item {
		flex: 1;
		text-align: center;
		padding: 15rpx 0;
		font-size: 16px;
		color: #1976D2;
		background: #FFFFFF;
		transition: all 0.3s;
	}

	.role-item.active {
		background: #1976D2;
		color: #FFFFFF;
	}

	.tab-wrapper {
		display: flex;
		margin-bottom: 60rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 16px;
		color: #666666;
		padding-bottom: 20rpx;
		position: relative;
	}

	.tab-item.active {
		color: #1976D2;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background: #1976D2;
		border-radius: 2rpx;
	}

	.input-item {
		margin-bottom: 40rpx;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid #DCDFE6;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}

	.input-icon {
		width: 18px;
		height: 18px;
		margin-right: 20rpx;
	}

	.uni-input {
		flex: 1;
		height: 88rpx;
		font-size: 14px;
	}

	.sms-btn {
		font-size: 14px;
		color: #1976D2;
		padding: 0 20rpx;
	}

	.login-btn {
		width: 100%;
		height: 88rpx;
		margin: 60rpx 0;
		font-size: 16px;
	}

	.helper-links {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
	}

	.link {
		font-size: 14px;
		color: #1976D2;
	}

	.divider {
		position: relative;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.divider::before,
	.divider::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 80rpx;
		height: 2rpx;
		background: #EEEEEE;
	}

	.divider::before {
		left: 50%;
		margin-left: -140rpx;
	}

	.divider::after {
		right: 50%;
		margin-right: -140rpx;
	}

	.divider-text {
		font-size: 14px;
		color: #999999;
		background: #FFFFFF;
		padding: 0 20rpx;
	}

	.wechat-login {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wechat-text {
		font-size: 14px;
		color: #07C160;
		margin-top: 10rpx;
	}
</style>